<template>
  <div>
    <el-form :model="params" ref="ruleForm" label-position="right" size="small" label-width="110px" class="base-search-more">
      <el-row >
        <el-col :span="6" v-if="$store.state.showAgent">
          <el-form-item label="区域">
            <agent-list style="width: 100%" :agentids="params.agentIds"
                        v-on:listenToChildEvent="getAentId"></agent-list>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商家名称">
            <el-input style="width: 100%" @keyup.enter.native="$refs.pagination.handleSizeChange(10)" placeholder="请输入内容"
                      v-model="params.name" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="商家电话">
            <el-input style="width: 100%" @keyup.enter.native="$refs.pagination.handleSizeChange(10)" placeholder="请输入内容"
                      v-model="params.mobile" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="$store.state.showAgent ? 6 : 12" style="text-align: right">
          <el-form-item label-width="0">
            <el-button type="primary" icon="el-icon-search"
                       @click="$refs.pagination.handleSizeChange(10)">查询
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row type="flex" class="sub-nav">
      <span :class="{'cur':params.selectRank =='2'}" @click="cheackTableType(2)">普通商家</span>
      <span :class="{'cur':params.selectRank =='1'}" @click="cheackTableType(1)">优选商家和排名靠前</span>
    </el-row>
    <div :class="[params.selectRank ==1?'table-ranking':'','base-table-wrap']" >
      <el-table :data="tableData.list" border>
        <el-table-column label="商家信息" min-width="450" align="left">
          <template slot-scope="scope">
            <div class="flex">
              <div class="table-first flex">
                <div class="bus-img"><img :src="'http://image.jiaowawang.cn/'+scope.row.imgpath" /></div>
                <ul class="msg-list">
                  <li class="name">
                    <span class="shop">{{scope.row.name}}</span>
                    <span class="st" :class="{'st1':scope.row.statusx !='-1'}">{{scope.row.statusx=='-1'?'无效':'有效'}}</span>
                    <span class="st" :class="{'st1':scope.row.statu =='0'}">{{scope.row.statu =='0'?'正在营业':'暂停营业'}}</span>
                  </li>
                  <li class="text">ID:{{scope.row.id}}</li>
                  <li class="text">地址：{{scope.row.provinceName}}{{scope.row.cityname}}{{scope.row.countyname}}{{scope.row.address}}</li>
                </ul>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="活动信息" min-width="250" align="left">
          <template slot-scope="scope">
            <div v-if="scope.row.activityList.length > 0">
              <div v-if="scope.row.activityList.filter(i =>i.ptype =='2').length"><span style="font-weight: bold;">折扣：</span> 商品折扣 * {{scope.row.activityList.filter(i =>i.ptype =='2').length}}</div>
              <div v-if="scope.row.activityList.filter(i =>i.ptype =='4').length"><span style="font-weight: bold;">特价：</span> 商品特价 * {{scope.row.activityList.filter(i =>i.ptype =='4').length}}</div>
              <div class="table-second" v-for="(item,index) in scope.row.activityList.filter(i =>i.ptype !='2'&& i.ptype !='4')" :key="item.id+index.toString()">
                <span v-if="item.ptype =='1'">
                  <span style="font-weight: bold;">满减：</span>
                  <span class="act" v-for="list in item.runfastFullLess.filter(i => i.ptype != '2' && i.ptype != '4')" :key="list.id">满{{list.full}}减{{list.less}}</span>
                </span>
                <span v-if="item.ptype =='3'"><span style="font-weight: bold;">赠送：</span>赠送</span>
                <!-- <span v-if="item.ptype =='4'"><span style="font-weight: bold;">特价：</span>{{item.name}}</span> -->
                <span v-if="item.ptype =='5'"> <span style="font-weight: bold;">满/免运费：</span>满{{item.fulls}}元免运费</span>
                <!--   <span v-if="scope.row.ptype =='6'">优惠券</span>-->
                <span v-if="item.ptype =='7'"><span style="font-weight: bold;">免部分运费：</span>免{{item.lesss}}元运费）</span>
                <span v-if="item.ptype =='8'"><span style="font-weight: bold;">下单立减：</span>下单立减{{item.lesss}}元</span>
                <!--  <span v-if="scope.row.ptype =='9'">首单立减活动</span>-->
                <span v-if="item.ptype =='10'"><span style="font-weight: bold;">商家红包：</span> 商家赠送{{item.redamount|catpion3}}红包</span>
                <span v-if="item.ptype =='11'"><span style="font-weight: bold;">下单返红包：</span>{{item.redamount|catpion3}}红包</span>
                <span v-if="item.ptype =='12'"><span style="font-weight: bold;">区域红包：</span>区域【{{item.agentname}}】赠送{{item.redamount|catpion3}}红包</span><br/>
              </div>
            </div>
            <div v-if="scope.row.activityList.length ==0">暂无参与活动</div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="270" align="right">
          <template slot-scope="scope">
            <el-row type="flex" justify="end">
              <el-button type="primary" plain v-if="scope.row.priority"
                         @click="cancelPriorityBusiness(scope.row.id)" size="mini">取消优先排名
              </el-button>
              <el-button type="primary" v-if="!scope.row.priority"
                         @click="setPriorityBusiness(scope.row.id)" size="mini">设置优先排名
              </el-button>
              <el-button type="primary" plain v-if="scope.row.goldbusiness"
                         @click="cancelGoldBusiness(scope.row.id)" size="mini">取消优选商家
              </el-button>
              <el-button type="primary" v-if="!scope.row.goldbusiness"
                         @click="setGoldBusiness(scope.row.id)" size="mini">设置优选商家
              </el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <pt-table-loading v-show="isloadingTable" />
      <pt-pagination ref="pagination" :total="tableData.total" @listeningEvent="triggerEvent" />
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        params: { //表格查询
          page: 0,
          size: 10,
          name: '',
          mobile: '',
          selectRank:2,//数据类型状态
          agentIds: [],//区域
        },
        isloadingTable: false,//表单等待
        tableData: {} // 表格数据
      }
    },

    filters: {
      catpion3(p) {
        if (!p) return ''
        if (p.indexOf(',') > -1) {
          return p.split(',').join('-') + '元的随机'
        } else {
          return p + '元'
        }
      }
    },
    methods: {
      getAentId(item) {//获取子组件传递的区域
        this.params.agentIds = item
      },
      cheackTableType(type) {//刷选状态
        this.params.selectRank = type
        this.$refs.pagination.handleSizeChange(10)
      },
      getTableList() { //获取商户列表数据
        this.isloadingTable = true
        const params = { ...this.params }
        params.agentIds = params.agentIds.length > 0 ? params.agentIds.join(',') : ''
        this.$http.get('/server/businessRank/list?' + this.qs.stringify(params)).then(res => {
          if (res.data.success) {
            this.tableData = res.data.data
          }
        }).finally(err => { this.isloadingTable = false })
      },
      setGoldBusiness(id) {//设置金牌商家
        this.$http.get('/server/businessRank/setGoldBusiness?' + this.qs.stringify({id: id})).then(res => {
          if (res.data.success) {
            this.$message({type: 'success', message: '修改成功!'})
            this.getTableList()
          }
        })
      },
      setPriorityBusiness(id) { //设置商家优先排名
        this.$http.get('/server/businessRank/setPriorityBusiness?' + this.qs.stringify({id: id})).then(res => {
          if (res.data.success) {
            this.$message({type: 'success', message: '修改成功!'})
            this.getTableList()
          }
        })
      },
      cancelGoldBusiness(id) { //取消金牌商家
        this.$http.get('/server/businessRank/cancelGoldBusiness?' + this.qs.stringify({id: id})).then(res => {
          if (res.data.success) {
            this.$message({type: 'success', message: '修改成功!'})
            this.getTableList()
          }
        })
      },
      cancelPriorityBusiness(id) { //取消商家优先排名
        this.$http.get('/server/businessRank/cancelPriorityBusiness?' + this.qs.stringify({id: id})).then(res => {
          if (res.data.success) {
            this.$message({type: 'success', message: '修改成功!'})
            this.getTableList()
          }
        })
      },
      triggerEvent(type,val) { // 分页器
        if (type === 'page') {
          this.params.page = val - 1
        } else if (type === 'size') {
          this.params.page = 0
          this.params.size = val
        }
        this.getTableList()
      }
    },
    mounted() {
      this.getTableList()
    }
  }
</script>

<style lang="scss" scoped>
  @import '/css/ranking.scss';
</style>
